<template>
    <div class="back">
        <canvas id="cvs" width="1" height="1"></canvas>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, reactive, ref, toRefs} from 'vue'
import { getSongSrc, getSongDetail } from '../../api/music'
import { loadUrlSrc } from '../../api/common'
import { dynamicStyle1, dynamicStyle2 } from '../../utils/songAnimate'
export default defineComponent({
    props: {
        query:{
            type: [Number, String],
            default: null
        }
    },
    setup(props: any) {
        const state: any = reactive({
            cvs: '',
            ctx: '',
            width: 0,
            height: 0
        })
        onMounted( () => {
            initCanvas()
            window.addEventListener('resize', onResize)
            onResize()
            requestSong()
        })
        onUnmounted(() => {
            window.removeEventListener('resize', onResize)
        })
        const initCanvas = () => {
            state.cvs = document.querySelector('#cvs')
            state.ctx = state.cvs.getContext('2d')
        }
        const onResize = () => {
            state.width = window.innerWidth
            state.height = window.innerHeight
            state.cvs.width = state.width
            state.cvs.height = state.height
        }
        const requestSong = () => {
            Promise.all([getSongSrc(props.query), getSongDetail(props.query)])
            .then(res => {
                console.log(res)  
                if(res[0].data.code === 200 && res[1].data.code === 200){
                    const url = res[0].data.data[0].url
                    const info = res[1].data.songs[0]
                    loadUrlSrc(url).then(res => {
                        console.log(res)
                        if(res.status === 200){
                            createAudio(res.data, info)
                        }
                    })
                }
            })
            .catch( err => {
                console.log(err)
            })              
        }
        const createAudio = (data: ArrayBuffer, info: any) => {
            const audioContext: AudioContext = new window.AudioContext()
            audioContext.decodeAudioData(data, buffer => {
                const audioBufferSourceNode = audioContext.createBufferSource()
                const analyser = audioContext.createAnalyser()
                //dynamicStyle1(state.width, state.height, state.ctx, analyser)
                dynamicStyle2(state.width, state.height, state.ctx, analyser, info)
                audioBufferSourceNode.connect(analyser)
                analyser.connect(audioContext.destination)
                audioBufferSourceNode.buffer = buffer
                audioBufferSourceNode.start()
            })
        }
        const randomRgbColor = () => { //随机生成RGB颜色
            var r = Math.floor(Math.random() * 256); //随机生成256以内r值
            var g = Math.floor(Math.random() * 256); //随机生成256以内g值
            var b = Math.floor(Math.random() * 256); //随机生成256以内b值
            return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色
        }
        return {
            ...toRefs(state)
        }
    },
})
</script>
<style scoped>
.back{
    background-image: url('../../assets/bg.png');
    background-size: cover;
}
</style>
